<template>
    <div class="el-tabs__content">
        <div class="cmps-student-submit">
            <div class="detail-header">
                <div class="cmp-work-list-card">
                    <div class="layout-left flex-align">
                        <el-image class="img" src="https://www.ketangpai.com/images/web2x_zuoye.png"></el-image>
                        <div class="another-name">
                            <span class="lable-type">{{ work.activity }}</span>
                        </div>
                    </div>
                    <div class="layout-right">
                        <div class="flex-align" style="margin-bottom: 0px;">
                            <div class="h-left">
                                <div class="title flex-align">
                                    <h4 class="common_pointer">{{ work.title }}</h4>
                                </div>
                            </div>
                            <div class="h-right font14">
                                <div class="s-right" style="text-align: right;"></div>
                            </div>
                        </div>
                        <div class="tags">
                            <span class="el-tag el-tag--mini el-tag--light">
                                {{ work.type === 1 ? '个人作业' : '小组作业' }}
                            </span>
                            <span class="el-tag el-tag--mini el-tag--light">
                                提交起止时间：{{ work.releaseTime }}~{{ work.endTime }}
                            </span>
                            <span class="tag-gray el-tag el-tag--info el-tag--mini el-tag--light">
                                {{ work.score }}分
                            </span>
                        </div>
                        <div class="stu-status font14"></div>
                    </div>
                </div>
            </div>
            <div class="xian"></div>
            <div class="submit-box mb24">
                <div class="flex-between mb24">
                    <div class="font20">提交内容</div>
                    <div @click="submitWork()">
                        <button class="el-button el-button--primary el-button--small">
                            <span>确认提交</span>
                        </button>
                    </div>

                </div>
                <div class="upload-box">
                    <div class="title font16">作业附件</div>
                    <el-upload action="" :http-request="onUpload" class="contain mb24">
                        <p>
                            <i class="el-icon-upload"></i>
                        </p>
                        <p>点击上传添加作业文件</p>
                        <p class="tip">支持各类文档、图片、代码、压缩包格式</p>
                    </el-upload>
                    <div class="title font16 mb24">
                        "作业留言"
                        <span class="font12 tip">选填</span>
                    </div>
                    <div class="el-textarea el-input--medium">
                        <textarea style="min-height: 95.4815px; height: 95.4815px;" placeholder="作业以附件形式提交，留言仅作备注使用哦！"
                            class="el-textarea__inner" v-model="stuWork.message"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getFormData } from '@/utils/getFormData.js';
import {getRequest, postRequest} from "@/utils/api";

export default {
    name: "submitWork",
    components: {
    },
    data() {
        return {
            work: [],
            stuWork: {
                id:0,
                status: 1,
                workId: 1,//this.$store.getters.workId,
                userId: 3,//this.$store.getters.user.id,
                username: "john"//this.$store.getters.user.name
            }
        }
    },
    methods: {
        // 获取作业信息
        getWork() {
          ///work/selectById/${this.stuWork.workId}
            getRequest(`/work/selectById/${this.stuWork.workId}`).then(res => {
              console.log("getWork:",res.data.data)
                if (res) {
                    this.work = res.data.data;
                }
            })
        },
        // 通过课程id和用户id获取学生作业id
        getStuWorkId() {
            const cid = 1;//this.$store.getters.courseId;
            const uid = 3;//this.$store.getters.user.id;
            getRequest(`/stuWork/selectByUCid/${cid}/${uid}`).then(res => {
              console.log("getStuWorkId:",res.data.data)
                if (res) {
                    for (let i = 0; i < res.data.data.length; i++) {
                        if (res.data.data[i].workId == this.stuWork.workId) {
                            this.stuWork.id = res.data.data[i].id;
                            break;
                        }
                    }
                }
            })
        },
        // 提交作业
        submitWork() {
            if (this.stuWork.file == null) return this.$message.error("未上传作业");
            this.stuWork.submitTime = this.getCurrentTime();
            postRequest('/stuWork/update', getFormData(this.stuWork)).then(res => {
              console.log("submit:",res)
                if (res) {
                    this.$router.push("/classPage");
                }
            })
        },
        // 上传文件
        onUpload(file) {
            this.stuWork.file = file.file;
        },
        // 获取当前时间
        getCurrentTime() {
            return this.$moment().format("YYYY-MM-DD HH:mm:ss");
        },
    },
    created() {
        this.getWork();
        this.getStuWorkId();
    }
}
</script>

<style scoped lang="less">
.el-tabs__content {
    overflow: hidden;
    position: relative;

    .cmps-student-submit {
        width: 1224px;
        margin: 0 auto;

        .detail-header {
            position: relative;

            .cmp-work-list-card {
                width: 100%;
                display: flex;
                position: relative;

                .layout-left {
                    flex-direction: column;
                    min-width: 55px;
                    margin-right: 16px;
                    font-size: 12px;

                    .img {
                        width: 60px;
                        height: 60px;
                        margin-bottom: 10px;
                    }

                    .another-name {
                        position: relative;
                        margin-top: 5px;
                        line-height: 13px;
                        display: inline-block;
                        width: 85px;
                        text-align: center;
                        max-height: 31px;
                        margin-bottom: 2px;

                        .lable-type {
                            color: #3c4043;
                            font-size: 13px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            max-width: 65px;
                            max-height: 30px;
                            line-height: 15px;
                            word-break: break-all;
                            display: inline-block;
                            text-align: center;
                        }
                    }
                }

                .layout-right {
                    width: 100%;

                    .h-left {
                        .title {
                            line-height: 20px;

                            h4 {
                                font-size: 16px;
                                font-weight: 500;
                                margin-right: 5px;
                                max-width: 670px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                            .common_pointer {
                                -webkit-user-select: none;
                                -moz-user-select: none;
                                -ms-user-select: none;
                                user-select: none;
                                cursor: pointer;
                            }
                        }
                    }

                    .h-right {
                        text-align: right;
                    }

                    .tags {
                        padding: 8px 0;

                    }

                    .stu-status {
                        margin-top: 16px;
                        color: #3c4043;
                    }
                }
            }
        }

        .xian {
            width: 100%;
            height: 1px;
            border-bottom: 1px solid #e7ebf0;
            margin: 12px 0;
        }

        .submit-box {
            .upload-box {
                border: 1px solid #dadce0;
                border-radius: 8px;
                padding: 24px;
                position: relative;

                .contain {
                    padding: 40px;
                    background: #f8f9fa;
                    text-align: center;
                    color: #4285f4;
                    cursor: pointer;
                    font-size: 20px;

                    p:first-child {
                        margin-bottom: 16px;
                    }

                    p:nth-child(2) {
                        margin-bottom: 8px;
                    }

                    .tip {
                        color: #74787c;
                        margin-left: 8px;
                    }
                }

                .title {
                    margin-top: 24px;
                    margin-bottom: 16px;

                    .tip {
                        color: #74787c;
                        margin-left: 8px;
                    }
                }
            }
        }
    }
}

.mb24 {
    margin-bottom: 24px;
}

.font14 {
    font-size: 14px;
}

.font16 {
    font-size: 16px;
}

.font20 {
    font-size: 20px;
}

.flex-align {
    display: flex;
    align-items: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>
